<template>
  <div class="be-spinner-container" :class="[{ 'is-open': showLoading, 'is-fullscreen': fullscreen }, className]">
    <div class="be-spinner-loader"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

// 定义 Props 接口
interface Props {
  loading?: boolean // loading 状态开启
  className?: string // 类名
  fullscreen?: boolean // 是否全屏
}

// 定义组件选项
defineOptions({ name: 'BeSpinner' })

// props
const props = withDefaults(defineProps<Props>(), {
  loading: false,
  className: '',
  fullscreen: false
})

// state
const showLoading = ref(false)

// 监视 props.loading 的变化
watch(
  () => props.loading,
  (show) => {
    showLoading.value = show // 隐藏加载动画
  },
  {
    immediate: true // 初始立即调用
  }
)
</script>

<style lang="scss" scoped>
/* 跳跃动画的关键帧 */
@keyframes loader-jump-ani {
  15% {
    border-bottom-right-radius: 3px;
  }

  25% {
    transform: translateY(9px) rotate(22.5deg);
  }

  50% {
    border-bottom-right-radius: 40px;
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
  }

  75% {
    transform: translateY(9px) rotate(67.5deg);
  }

  100% {
    transform: translateY(0) rotate(90deg);
  }
}

/* 加载器阴影动画的关键帧 */
@keyframes loader-shadow-ani {
  0%,
  100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.2, 1);
  }
}
.be-spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f4f7f9;
  opacity: 0;
  transition: all 500ms;
  &.is-open {
    visibility: visible;
    opacity: 1;
  }
  &.is-fullscreen {
    position: fixed;
    z-index: 9999;
  }
  .be-spinner-loader {
    position: relative;
    width: 48px;
    height: 48px;
  }
  .be-spinner-loader::before {
    position: absolute;
    top: 60px;
    left: 0;
    width: 48px;
    height: 5px;
    content: '';
    background-color: var(--primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: loader-shadow-ani 0.5s linear infinite;
  }
  .be-spinner-loader::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: var(--primary);
    border-radius: 4px;
    animation: loader-jump-ani 0.5s linear infinite;
  }
}
</style>
